import Taro, { Component } from '@tarojs/taro';
import { View, Text ,Image,Label } from '@doctorwork/components';
import { connect } from '@tarojs/redux';
import Navigate from '../../components/Navigate/index';
import { rewriteAddMTA } from '../../model/utils/rewrite';
import SelectCar from '../../components/selectCar/index';
import './index.styl';
import Empty from '../../components/Empty';
import mockData from './mock.json';

@connect(({ oilList }) => ({
    ...oilList
}))
@rewriteAddMTA
export default class OilList extends Component {
    config = {
        navigationBarTitleText: '加油列表',
        'navigationBarBackgroundColor': '#00c365',
        'navigationBarTextStyle': 'white'
    };

    constructor(props){
        super(props);
        this.state = {
            showCarSelect: false
        };
    }
    
    componentDidMount(){
        // this.props.dispatch({
        //     type : 'oilList/init'
        // });
    }
    componentDidShow() {
        const carNumber = wx.getStorageSync('carNumber')||'';
        if(carNumber){
            this.props.dispatch({
                type : 'oilList/init',
                payload: {carNumber}
            });
        }
        this.props.dispatch({
            type : 'oilList/getCarList',
            payload: {carNumber}
        });
    }

    jumpAdd(){
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : '/pages/create/index',
            }
        });
    }
    jumpDetail(id){
        const {list} = this.props;
        const hasData = !!list&&list.length;
        if(!hasData){
            wx.showToast({
                title: '请先添加数据',
                icon: 'none'
            });
            return;
        }
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : `/pages/detail/index?id=${id}`,
            }
        });
    }
    /**
     * 展示今日油价
     */
    showPrice(){
        this.props.dispatch({
            type: '$router/forward',
            payload: {
                url: '/pages/price/index'
            }
        });
    }

    onCarSelected(carNumber){
        if(carNumber){

            this.props.dispatch({
                type : 'oilList/init',
                payload: {carNumber}
            });
        }
        this.setState({showCarSelect: false});
    }
    addCar(){
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : '/pages/car/index',
            }
        });
    }

    goReport(month){
        month = month.replace('年','-').replace('月','');
        const url = `/pages/report/index?month=${month}`;
        this.props.dispatch({
            type : '$router/forward',
            payload : { url }
        });
    }
    /**
     * 取消选择车辆
     */
    onCarCancel(){
        this.setState({showCarSelect: false});
    }
    render() {
        const {list,userData,duration,carNumber,carList} = this.props;
        const {showCarSelect} = this.state;
        const hasData = !!list&&list.length;
        const dataList = hasData ? list: mockData;
        return (
            <View className='container'>
                <Navigate
                    title='加油记录'
                    color='white'
                    backgroundColor='#00c365'
                    backTextColor='white'
                />
                
                <View className='header'>
                    {
                        showCarSelect && <SelectCar carList={carList} carNumber={carNumber} onCarSelected={this.onCarSelected.bind(this)} onClose={this.onCarCancel.bind(this)} />
                    }
                    <View className='car-name'>
                        {
                            carNumber ? <View className='car-number'>{carNumber}</View> : <View className='car-number' onClick={this.addCar.bind(this)} data-name='点击添加车辆'>点击添加车辆</View>
                        }
                        
                        {
                            carNumber && <Label className='car-exchange' onClick={() => this.setState({showCarSelect: true})} data-name='切换'>切换车辆 ></Label>
                        }
                        
                    </View>
                    <View className='add-record'>
                        <View className='condition'>
                            <View className='item'>
                                <View className='number'><Label className='unit'>¥</Label>{userData.total_price/100||0} </View>
                                <View className='type' >累计消费(含首次)</View>
                            </View>
                            <View className='item'>
                                <View className='number'>{userData.total_amount||0}<Label className='unit'>L</Label></View>
                                <View className='type' >累计加油(含首次)</View>
                            </View>
                            <View className='item'>
                                <View className='number'>{userData.totalMileage||'-'}<Label className='unit'>KM</Label></View>
                                <View className='type'>行驶里程(不含)</View>
                            </View>
                        </View>
                        <View className='last-oil'>

                            {
                                list && list.length ? `距离上次加油: ${duration}天 ` : '您还没有添加任何记录哦~'
                            }
                        </View>
                        <View className='add-btn' onClick={this.jumpAdd.bind(this)} data-name='去记一笔'>去记一笔</View>
                        <Image src='https://jingyikeji.fun/assets/oil-machine.png' className='oil-icon'></Image>
                    </View>
                </View>
                
                {
                    dataList ? <View className='content'>
                        {
                            !hasData && <View className='example-text'>以下为示例数据，添加数据后会自动隐藏</View>
                        }

                        <View className={hasData ? '':  'blur'}>
                            {
                                dataList.map(data => (<View key={data.month}>
                                    {
                                        hasData && <View className='oil-add'>
                                            <Text className='iconfont icon-right oil-add-btn'  onClick={this.jumpAdd.bind(this)} data-name='添加记录'>&#xe621;</Text>
                                        </View>
                                    }
                                    
                                    <View className='oil-title'>
                                        <Label className='month'>{data.month}</Label>
                                        <Label className='total'>月度消费：{data.totalPrice}元</Label>
                                        <Label onClick={this.goReport.bind(this,data.month)} className='report' data-name='生成月报'>生成月报 ></Label>
                                    </View>
                                    <View className='oil-list'>
                                        {
                                            data.list.map((item,index) => (
                                                <View key={index} className='oil-items'>
                                                    <View className='oil-step'>
                                                        <View className='oil-dot'></View>
                                                    </View>
                                                    <View className='oil-item'  onClick={this.jumpDetail.bind(this,item.id)} data-name='查看详情' data-id={item.id}>
                                                        <View  >
        
                                                            <View className='oil-carNumber'>{item.carNumber}</View>
                                                            <View className='oil-time'>加油时间：{item.oilTime}</View>
                                                            <View className='oil-time'>油价：{item.price}</View>
                                                        </View>
                                                        <View >
                                                            <View className='oil-price'>{item.totalPrice} 元</View>
                                                            <View className='oil-detail' >查看详情<Text className='iconfont icon-right'>&#xe658;</Text></View>
                                                        </View>
                                                
                                                    </View>
                                                </View>
                                            ))
                                        }
                                    </View>
                                </View>))
                            }
                        </View>
                        <View className='no-more'>暂无更多数据~</View>
                    </View>: <View className='empty'>
                        <Empty />
                    </View>
                }

                
            </View>

        );
    }
}
